<template>
	<view id="customer-list">
		<van-cell-group>
			<van-cell is-link @click="showSearchBar">
				点击可进行用户条件筛选
			</van-cell>
		</van-cell-group>
		<scroll-view class="list-content" scroll-y="true" bindscrolltolower="toScrollBottom" :style="$store.state.user.userInfo.permit === 0 ? 'height: calc(100vh - 88rpx);' : 'height: calc(100vh - 88rpx - 114rpx);'">
			<view class="help-content">
				<van-checkbox-group :value="checkedCustomers" @change="changeCustomer" :max="1999">
					<view class="scroll-list">
						<view class="content-p" v-for="item in customerList" :key="item.id" :error="picLoseBind" :data-errorimg="index">
							<van-checkbox :name="item.id">
							</van-checkbox>
							<image :src="item.avatarUrl || errorImg">
							</image>
							<view class="customer-message" @click="toCustomerDetail(item)">
								<text class="customer-name">{{ item.nickName }}</text>
								<text class="add-time">添加时间: {{ formatDate(item.createdAt) }}</text>
								<van-icon name="arrow"></van-icon>
							</view>
						</view>
					</view>
				</van-checkbox-group>
			</view>
			<view class="refresh">
				<image src="/static/imgs/refresh.png" alt="下滑刷新" v-if="!isLoading && !loadingFinished">
				</image>
				<span v-if="!isLoading && !loadingFinished">下滑加载更多</span>
				<view class="loading" v-if="isLoading">
					<span style="margin-right: 10px;">加载中</span>
					<van-loading size="18px"></van-loading>
				</view>
				<span v-if="loadingFinished">没有更多了哦(⊙︿⊙)</span>
			</view>
		</scroll-view>
		<van-action-sheet :show="showSearch" title="用户筛选" @close="onClose" :close-on-click-overlay="true">
			<view id="search-form">
				<view class="search-goods">
					<van-cell-group>
						<van-field :value="inputName" clearable icon="search" :placeholder="'请输入查询客户名称'" @change="inputNameChange">
						</van-field>
					</van-cell-group>
					<!-- <van-cell-group>
						<van-radio-group model:value="{{myAttention}}" style="display: flex;flex-direction: row;margin-top: 10upx;margin-left: 20upx;">
							<van-radio name="1">全部</van-radio>
							<van-radio name="2" style="margin-left: 10upx;">我关注的</van-radio>
						</van-radio-group>
					</van-cell-group> -->
				</view>
				<view style="text-align: center;padding:20rpx;">
					<van-button type="info" :loading="loadingButton" @click="searchCustomer" round>
						查询
					</van-button>
				</view>
			</view>
		</van-action-sheet>
		<view class="button-area" v-if="$store.state.user.userInfo.permit === 1 || $store.state.user.userInfo.permit === 2">
<!--			<van-button type="info" :loading="loadingButton" @click="addCustomer" round class="tag-btn">
				修改用户
			</van-button>-->
			<van-button type="danger" :loading="loadingButton" @click="deleteCustomer" round class="tag-btn">
				批量删除
			</van-button>
		</view>
	</view>
</template>

<script>
	import {
		USER_DETAIL
	} from "../../store/mutation-types";
	import {
		batchDelete
	} from "../../static/utils";

  import {
    reqDeleteFolders, reqDeleteUsers,
    reqUsers
  } from '../../api/user.js';

	export default {
		name: "user",
		data() {
			return {
				checkedCustomers: [],
				customerList: [],
				errorImg: '',
				loadingFinished: false,
				loadingButton: false,
				inputName: '',
				showSearch: false,
				isLoading: false,
        companyId: '',
				myAttention: '1',
				pagenation: {
					limit: 10,
					offset: 0
				},
        folderId: ''
			}
		},
		methods: {
			changeCustomer(e) {
				this.checkedCustomers = e.detail;
			},
			deleteCustomer() {
        if (this.checkedCustomers.length === 0){
          return uni.showToast(({
            title: '请选择需要删除的用户',
            icon: 'none'
          }))
        }
				batchDelete({
					title: '用户',
					okCallBack: () => {
            reqDeleteUsers({
              ids: this.checkedCustomers.join(',')
            }).then(() => {
              uni.showToast({
                title: '删除成功!'
              })
              this.getUsers(0)
            })
					}
				})
			},
			addCustomer() {
				uni.navigateTo({
					url: '/pages/userAdd/userAdd'
				})
			},
			// 图片404绑定
			picLoseBind(e) {
				var errorImgIndex = e.target.dataset.errorimg; //获取循环的下标
				var imgObject = "customerList[" + errorImgIndex + "].img"; //carlistData为数据源，对象数组
				var errorImg = {};
				errorImg[imgObject] = "../../public/img/errorimg.png"; //我们构建一个对象
				this.errorImg = errorImg; //修改数据源对应的数据
			},
			toCustomerDetail(item) {
				this.$store.commit(USER_DETAIL, item)
				uni.navigateTo({
					url: '/pages/userDetail/userDetail'
				})
			},
			searchCustomer() {
				this.getUsers(0);
				this.showSearch = false;
			},
			showSearchBar() {
				this.showSearch = true;
			},
			inputNameChange(e) {
        this.inputName = e.detail;
			},
			onClose() {
				this.showSearch = false;
			},
			toScrollBottom() {
				// this.getUsers(1);
        if (this.isLoading){
          return false;
        }
        if (this.loadingFinished){
          return false;
        }
        this.curPage ++;
        this.getUsers(0)
			},
			async getUsers(type) {
				this.isLoading = true;
				const companyId = 3 !== this.userInfo.permit ? this.userInfo.company : undefined;
				const folderId = 2 > this.userInfo.permit ? this.userInfo.folderId : undefined;
				const data = {
					...this.pagenation,
					keywords: this.inputName,
				};
				
				if (companyId) {
					data.companyId = this.userInfo.company;
				}
				if (folderId) {
					data.folderId = this.userInfo.folderId;
				}
				if (this.folderId){
          data.folderId = this.folderId;
        }
				if (this.companyId){
          data.companyId = this.companyId;
        }
				
				if ('2' === this.myAttention) {
					data.myAttention = 1;
				}
				const result = await reqUsers(data);
				if (0 === type) {
					this.customerList = result.data.messageBody.list;
				} else {
					this.customerList.push(...result.data.messageBody.list);
				}

				if (this.customerList.length === result.data.messageBody.total){
				  this.loadingFinished = true;
        } else {
          this.loadingFinished = false;
        }
				
				this.isLoading = false;
				
				// if (result.data.messageBody.total === this.customerList.length) {
				// 	this.loadingFinished = true;
				// } else {
				// 	this.pagenation.offset += result.data.messageBody.limit;
				// 	this.loadingFinished = false;
				// }
			},
		},
			
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
    onLoad (options) {
		  this.folderId = options.folderId || '';
		  this.companyId = options.companyId || '';
    },
    onShow(){
      this.getUsers(0);
    }
	}
</script>

<style lang="less">
	/* pages/task/task.wxss */
	#customer-list {
		background: #F6F6F6;
		min-height: 100vh;
		overflow: hidden;
	}

	#customer-list .p-title {
		font-size: 16px !important;
		font-weight: 550 !important;
		color: #333333;
		margin-bottom: 10rpx;
	}

	#customer-list .van-cell__value {
		text-align: center;
	}

	#customer-list .search-radio {
		display: flex;
		padding: 20rpx;
		font-size: 28rpx;
	}

	#customer-list .search-tag {
		margin-left: 30rpx;
	}

	#customer-list .help-head {
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 0.3rem;
		position: relative;
	}

	#customer-list .help-head .arrow-left {
		position: absolute;
		left: 0.3rem;
	}

	#customer-list .help-head .arrow-left svg {
		width: 0.5rem;
		height: 0.5rem;
		margin-top: 0.1rem;
	}

	#customer-list .help-head span {
		font-size: 0.36rem;
		font-weight: 800;
		color: #333333;
		line-height: 36px;
		text-align: center;
		flex: 1;
		margin-bottom: 0;
	}

	#customer-list .help-content {
		padding: 0.45rem;
		padding-bottom: 0;
	}

	#customer-list .help-content .content-p {
		text-align: left;
		color: #646464;
		background: #FFFFFF;
		border-radius: 8px;
		padding: 0 30rpx;
		margin-bottom: 0.45rem;
		font-size: 14px;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	#customer-list .help-content .content-p .customer-message {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 30rpx 0;
	}

	#customer-list .help-content .content-p .van-icon-arrow {
		position: absolute;
		right: 1rem;
		top: 50%;
		transform: translateY(-50%);
	}

	#customer-list .help-content .content-p .customer-message text {
		margin: 10rpx;
	}

	#customer-list .help-content .content-p span {
		flex: 1;
		text-align: right;
		font-size: 17px;
		font-weight: 600;
	}

	#customer-list .help-content .content-p .customer-message .customer-name {
		font-size: 16px;
		font-weight: 600;
	}

	#customer-list .help-content .content-p>view {
		margin-block-start: 0;
		margin-block-end: 0rem;
		font-weight: 500;
		color: #333333;
		font-size: 14px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#customer-list .help-content .content-p view .tips-warning {
		color: #ff1940;
	}

	#customer-list .help-content .content-p view .tips-success {
		color: #5599ff;
	}

	#customer-list .help-content .content-p view .tips-no {
		color: #07C160;
	}

	#customer-list .help-content .content-p image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 15rpx;
		margin-left: 25rpx;
		border-radius: 50%;
	}

	#customer-list .van-checkbox {
		margin-left: -10rpx;
	}

	#customer-list .refresh {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0.27rem 0;
	}

	#customer-list .refresh image {
		width: 28rpx;
		height: 28rpx;
	}

	#customer-list .refresh span {
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		margin-left: 0.35rem;
		color: #cccccc;
	}

	#customer-list .button-area {
		padding: 0.4rem 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: #FFFFFF;
		box-shadow: 0px 0px 1px 0px #333333;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	#customer-list .button-area .tag-btn {
		margin: 0 0.6rem;
		border-radius: 4px;
	}

	#customer-list .button-area .van-button {
		width: 300rpx !important;
	}

	#customer-list .button-area .van-button--primary {
		background: #4791F4;
		border: 1px solid #4791F4;
	}

	/*# sourceMappingURL=task.css.map */
</style>
